<template>
	<view class="foot_circle">
		<!-- 标题 -->
		<view class="mail_two">
			<view class=""
				style="width: 220rpx; margin: 96rpx 50rpx 0 50rpx;display: flex; justify-content: space-between;">
				<view class="mail_text" style="line-height: 48rpx;font-weight: 700;">
					工作台
				</view>
				<image src="../../static/workOrder/Group1292.png" mode=""></image>
			</view>
		</view>
		<view class="data" style="overflow: hidden;">
		</view>
		<view class="" style="height: 104rpx;">
			<view class="box" style="margin: auto 50rpx; border-top: 1px solid #fff;">
				<view class="box_top">
					<view class="today">
						<view class="today_left" style="margin: 20rpx 0 0 20rpx;">
							<view class="" style="display: flex;">
								<text style="font-size: 40rpx;font-weight: 700;">{{today.todayPedestrians}}</text>
								<view class="" style="margin-top: 6rpx;margin-left: 20rpx;">
									<image src="../../static/slices/top(4).png" mode=""
										style="width: 22rpx;height: 22rpx;"></image>
									<!-- <text>20%</text> -->
								</view>
							</view>
							<view class="">
								今日行人
							</view>
						</view>
						<image class="today_right" src="../../static/slices/people.png" mode=""
							style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view class="today">
						<view class="today_left" style="margin: 20rpx 0 0 20rpx;">
							<view class="" style="display: flex;">
								<text style="font-size: 40rpx;font-weight: 700;">{{today.carDealerToday}}</text>
								<view class="" style="margin-top: 6rpx;margin-left: 20rpx;">
									<image src="../../static/slices/top(2).png" mode=""
										style="width: 22rpx;height: 22rpx;"></image>
									<!-- <text>50%</text> -->
								</view>
							</view>
							<view class="">
								今日车行
							</view>
						</view>
						<image class="today_right" src="../../static/slices/car.png" mode=""
							style="width: 24rpx;height: 24rpx; margin: 8rpx 12rpx 0 0;"></image>
					</view>
				</view>
				<view class="box_bottom">
					<view class="today">
						<view class="today_left" style="margin: 20rpx 0 0 20rpx;">
							<view class="" style="display: flex;">
								<text style="font-size: 40rpx;font-weight: 700;">{{today.todayVisitor}}</text>
								<view class="" style="margin-top: 6rpx;margin-left: 20rpx;">
									<image src="../../static/slices/top(2).png" mode=""
										style="width: 22rpx;height: 22rpx;"></image>
									<!-- <text>50%</text> -->
								</view>
							</view>
							<view class="">
								今日访客
							</view>
						</view>
						<image class="today_right" src="../../static/slices/foote.png" mode=""
							style="width: 24rpx;height: 24rpx;     margin: 8rpx 12rpx 0 0;"></image>
					</view>
					<view class="today">
						<view class="today_left" style="margin: 20rpx 0 0 20rpx;">
							<view class="" style="display: flex;">
								<text style="font-size: 40rpx;font-weight: 700;">{{workbenchData.tourist}}</text>
								<view class="" style="margin-top: 6rpx;margin-left: 20rpx;">
									<image src="../../static/slices/top(2).png" mode=""
										style="width: 22rpx;height: 22rpx;"></image>
									<!-- <text>50%</text> -->
								</view>
							</view>
							<view class="">
								今日游客
							</view>
						</view>
						<image class="today_right" src="../../static/slices/v.png" mode=""
							style="width: 24rpx;height: 24rpx;    margin: 8rpx 12rpx 0 0;"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 工单统计 -->
		<view class="data_Statistics" style="padding: 40rpx 23rpx 0 23rpx;">
			<text style="font-weight: 700; font-size: 30rpx; color: #1890FF;">丨</text><text
				style="font-weight: 700; font-size: 30rpx;">工单统计</text>
		</view>
		<uni-card>
			<view class="workbench">
				<view class="one">
					<view class="one_number">
						<u-circle-progress active-color="#30b5ff" :percent="favorable" width="140" border-width="16"
							duration="500">
							<view class="u-progress-content">
								<text class='u-progress-info' style="font-weight: 700; font-size: 28rpx;" v-if="user_type">{{favorable}}%</text>
								<text class='u-progress-info' style="font-weight: 700; font-size: 28rpx;" v-if="!user_type">0%</text>
							</view>
						</u-circle-progress>

						<!-- 								<view class="" style="position: absolute;top: 84rpx;width: 110rpx; height: 110rpx;line-height: 110rpx; text-align: center; background-color: red; border-radius: 50%;">
									200
								</view>
								<!-- 						<echarts ref="echat_a" :option="option5" style="width: 120rpx;height: 120rpx;"
											@click="echartsClick"></echarts> -->
					</view>
					<view class="one_text">
						好评率
					</view>
				</view>
				<view class="two">
					<view class="two_top">
						<view class="two_text_a">
							<view class="receive" style="color: #646464;">待接收</view>
							<view class="" style="display: flex; margin-top: 24rpx;">
								<image src="/static/workOrder/received.png" mode="" style="width: 36rpx;height: 36rpx;">
								</image>
								<view class="number" style="color: #fc904d;margin-left: 20rpx;">{{workbenchData.takeOver}}</view>
							</view>
						</view>
						<view class="two_text_b">
							<view class="receive" style="margin-right: 60rpx;color: #646464;">待处理</view>
							<view class="" style="display: flex; margin-top: 24rpx;margin-right: 36rpx;}">
								<image src="/static/workOrder/Pending.png" mode="" style="width: 38rpx;height: 38rpx;">
								</image>
								<view class="number" style="color: #53a6f6;margin-left: 20rpx;">{{workbenchData.dealWith}}</view>
							</view>
						</view>
					</view>
					<view class="two_bottom">
						<view class="two_text_c">
							<view class="receive" style="margin-top: 20rpx;color: #646464;">已处理</view>
							<view class="" style="display: flex; margin-top: 24rpx;margin-right: 6rpx;}">
								<image src="/static/workOrder/Processed.png" mode=""
									style="width: 36rpx;height: 36rpx;"></image>
								<view class="number" style="color: #25d2bd;margin-left: 20rpx;">{{workbenchData.finish}}</view>
							</view>
						</view>
						<view class="two_text_d">
							<view class="receive" style="margin-top: 20rpx;margin-right: 60rpx;color: #646464;">待复查</view>
							<view class="" style="display: flex; margin-top: 24rpx;margin-right: 36rpx;}">
								<image src="/static/workOrder/reviewed.png" mode="" style="width: 36rpx;height: 36rpx;">
								</image>
								<view class="number" style="color: #f95b7c;margin-left: 20rpx;">{{workbenchData.review}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-card>
		<!-- 待办任务 -->
		<view class="data_Statistics" style="padding: 40rpx 23rpx 0 23rpx;">
			<text style="font-weight: 700; font-size: 30rpx; color: #1890FF;">丨</text><text
				style="font-weight: 700; font-size: 30rpx;">待办任务</text>
		</view>
		<uni-card>
			<view class="task" >
				<view class="task_top" style="text-align: center; padding: 20rpx 0;">
					<u-circle-progress active-color="#30b5ff" :percent="workbenchData.agentTask" :width="240" border-width="16"
						duration="500">
						<view class="u-progress-content">
							<view class='u-progress-info' style="font-size: 58rpx;padding-left: 0!important;" v-if="user_type">{{workbenchData.agentTask}}</view>
							<view class='u-progress-info' style="font-size: 58rpx;padding-left: 0!important;" v-if="!user_type">0</view>
							<view style="font-size: 20rpx;text-align: center;">待办任务</view>
						</view>
					</u-circle-progress>
				</view>
				<view class="task_bottom">
					<view class="" style="text-align: center;">
						<view class="" style="font-size: 48rpx;" v-if="user_type">
							{{workbenchData.complaint}}
						</view>
						<view class="" style="font-size: 48rpx;" v-if="!user_type">
							0
						</view>
						<view class="" style="display: flex;">
							<view class="" style="line-height: 40rpx;">
								<image src="/static/workOrder/complaint.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
							</view>
							<view class="" style="margin-left: 10rpx;font-size: 24rpx;">
								投诉建议
							</view>
						</view>
					</view>
					<view class="" style="text-align: center;">
						<view class="" style="font-size: 48rpx;" v-if="user_type">
							{{workbenchData.agencyAudit}}
						</view>
						<view class="" style="font-size: 48rpx;" v-if="!user_type">
							0
						</view>
						<view class="" style="display: flex;">
							<view class="" style="line-height: 40rpx;">
								<image src="/static/workOrder/examine.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
							</view>
							<view class="" style="margin-left: 10rpx;font-size: 24rpx;">
								待办审核
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-card>
		<!-- 				<view class="charts-box">
				  <qiun-data-charts
					type="arcbar"
					canvasId="canvasColumn"
					id="canvasColumn"
					:chartData="chartData"
					:canvas2d="false"
					:animation="false"
					background="none"
				  />
				</view> -->
		<!-- 提示去登录 -->
		<u-modal v-model="show" show-cancel-button="true" cancel-color="#2979ff" :content="content" @confirm="confirm">
		</u-modal>
		<!-- template部分，u-tabBar放在页面展现最后 -->
		<!-- <u-tabbar :list="tabBarList" :active-color="activeColor" :inactive-colot="inactiveColor"></u-tabbar> -->
		<!-- tabBar -->
		<tabBar v-if="flag"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/components/tabBar/tabBar.vue"
	import {
		mapGetters
	} from 'vuex'
	// import echarts from '@/components/echarts/echarts.vue';
	export default {
		components:{
			tabBar
		},
		// components: {
		// 	echarts
		// },
		data() {
			return {
				// 模态框参数
				show: false,
				// 模态框参数
				content: '当前未登录，是否去登录',
				activeColor: "#55a0ff", // 选中时的颜色
				inactiveColor: "#000", // 未选中时的颜色
				// 工作台
				today:'',
				workbenchData: '',
				user_type: '',
				// 好评率
				favorable:'',
				flag:''
			}
		},
		computed: {
			...mapGetters([
				'tabBarList', // 获取展示的tabBar列表
			])
		},
		onLoad() {
			// this.getcoursetype()
		},
		onShow() {
			this.flag = true
			this.user_type = uni.getStorageSync("userType")
			this.loginId = uni.getStorageSync("setModel")
			// 今日行人,今日车行,今日访客
			this.pedestrian()
			// 工作台
			this.workbench()
			// 控制模态框
			// this.show=true
		},
		onHide() {
			this.flag = false
			// console.log('onHide')
		},
		methods: {
			echartsClick(params) {
				console.log('点击数据', params)
			},
			// 今日行人,今日车行,今日访客
			pedestrian() {
				this.$http.get('informationInquiry/today',{deptId:this.loginId.deptId}).then(res => {
					this.today=res.data
					console.log(res, '今日行人,今日车行,今日访客')
					// uni.setStorageSync('userType', res.code);
					// console.log(res.code,'199') 
				})
			},
			// 工作台
			workbench() {
				this.$http.get('informationInquiry/StatisticsInformation',{loginId:this.loginId.userId}).then(res => {
					this.workbenchData=res.data
					// this.favorable= (parseFloat(res.data.favorable)*100).toFixed(1)
					let favorable =res.data.favorable
					
					let that = this
					if (this.favorable.indexOf(".")!='-1'&&this.favorable.length>=5) {
						that.favorable= (parseFloat(res.data.favorable)*100).toFixed(1)
						console.log(1111111111111)
					} else {
						that.favorable=(res.data.favorable)*100
						console.log(22222222222222)
					}
					// console.log(this.favorable, '267')
					// console.log(res, '267')
					// uni.setStorageSync('userType', res.code);
				})
			},
			// 点击确认按钮时触发
			confirm() {
				this.openUrl('/pagesB/sign/sign')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.foot_circle {
		.u-progress-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}



		.u-progress-info {
			font-size: 28rpx;
			padding-left: 6rpx;
			letter-spacing: 2rpx
		}

		.mail_two {
			overflow: hidden;
			width: 100%;
			height: 174rpx;
			background: linear-gradient(-99.24deg, #57E1FF 0%, #75F7FF 20%, #0D92FF 100%);

			.mail_text {
				// width: 96rpx;
				height: 48rpx;
				color: #fff;
				font-size: 40rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		/deep/.uni-card {
			margin: 24rpx 30rpx 0;
			    border-radius: 20rpx;
				box-shadow: 4rpx 6rpx 10rpx 5rpx #ccc;
		}

		.data {
			height: 196rpx;
			border-radius: 0 0 50rpx 50rpx;
			background: linear-gradient(-99.24deg, #57E1FF 0%, #75F7FF 20%, #0D92FF 100%);
		}

		.box {
			width: 87%;
			position: absolute;
			top: 174rpx;

			.box_top {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
			}

			.box_bottom {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
			}

			.today {
				display: flex;
				justify-content: space-between;
				width: 48%;
				height: 130rpx;
				border-radius: 12rpx;
				background-color: #F6F6F6;
			}
		}

		.workbench {
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		
		.task {
			.task_bottom {
				display: flex;
				justify-content: space-evenly;
			}
			.u-progress-content {
					display: unset;
			}
		}
		
		.one {
			height: 160rpx;

			.one_number {
				width: 120rpx;
				height: 120rpx;

				// .u-progress-content {
				// 	display: unset;
				// }

				.charts-box {
					width: 180%;
					height: 180%;
				}

				/deep/.u-circle-progress {
					width: 120rpx !important;
					height: 116rpx !important;

					// transform: rotateZ(280deg);
					.u-canvas {
						// position: absolute;
						// top: 7px!important;
						// transform:rotate(280deg);
						// transform:rotate3d(0,0,1,280deg)
						// transform: translateZ(280rpx);
						// transform-origin: center;
						// transform:rotateZ(280deg);
						// -ms-transform:rotateX(280deg); 	/* IE 9 */
						// -moz-transform:rotate(280deg); 	/* Firefox */
						// -webkit-transform:rotate(280deg); /* Safari 和 Chrome */
						// -o-transform:rotate(280deg); 	/* Opera */
					}
				}

				.u-progress-content {
					// transform: rotateZ(-280deg);
				}
			}

			.one_text {
				font-size: 24rpx;
				margin-top: 10rpx;
				text-align: center;
			}
		}

		.two {
			display: flex;
			flex-direction: column;
			width: 400rpx;
			height: 260rpx;

			// background-color: red;
			.receive {
				color: #ccc;
			}

			.number {
				text-align: center;
				font-size: 40rpx;
				font-weight: 700;
				line-height: 38rpx;
			}

			.two_top {
				flex: 1;
				display: flex;
				// background-color: yellow;
				border-bottom: 1px solid #ccc;

				.two_text_a {
					flex: 1;
					// background-color: pink;
				}

				.two_text_b {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					border-left: 1px solid #ccc;
					// background-color: blue;
				}
			}

			.two_bottom {
				flex: 1;
				display: flex;

				// background-color: green;
				.two_text_c {
					flex: 1;
					// background-color: #f40;
				}

				.two_text_d {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					// background-color: orange;
					border-left: 1px solid #ccc;
				}
			}
		}

		.three {
			display: flex;
			width: 400rpx;
			height: 160rpx;

			.three_text_a {
				color: #ccc;
			}

			.three_text_b {
				text-align: center;
				font-size: 40rpx;
				font-weight: 700;
				line-height: 80rpx;
			}

			.three_left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				// background-color: red;
			}

			.three_right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;
				// background-color: pink;
			}
		}
	}
</style>

<style lang="scss">
	page {
		background-color: #EEEEEE;
		/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
		// .charts-box{
		//   width: 130rpx;
		//   height:130rpx;
		// }
		// .spinner {
		//     font-size: 120rpx;
		//     width: 1em;
		//     height: 1em;
		//     border-radius: 50%;
		//     box-shadow: inset 0 0 0 .1em rgba(229, 229, 229, .2);
		// 	// background: linear-gradient(-99.24deg, #57E1FF 0%, #75F7FF 20%, #0D92FF 100%);
		// }

		// .spinner i {
		//     position: absolute;
		//     clip: rect(0, 1em, 1em, .5em);
		//     width: 1em;
		//     height: 1em;
		//     animation: spinner-circle-clipper 1s ease-in-out infinite;
		// }

		// // @keyframes spinner-circle-clipper {
		// //     0% {
		// //         transform: rotate(0deg);
		// //     }

		// //     100% {
		// //         transform: rotate(180deg);
		// //     }
		// // }
		// .spinner i:after {
		//     position: absolute;
		//     clip: rect(0, 1em, 1em, .8em);
		//     width: 1em;
		//     height: 1em;
		//     content: '';
		//     animation: spinner-circle 1s ease-in-out infinite;
		//     border-radius: 50%;
		//     box-shadow: inset 0 0 0 .1em #e5e5e5;
		// 	// background: linear-gradient(-99.24deg, #57E1FF 0%, #75F7FF 20%, #0D92FF 100%);
		// }

		// @keyframes spinner-circle {
		//     0% {
		//         transform: rotate(-180deg);
		//     }

		//     100% {
		//         transform: rotate(180deg);
		//     }
		// }
	}
</style>
